import React, {Component} from 'react';
import Header from '../common/header'
import * as URLconstant from '../constant/URLconstant';
import Util from '../common/util';
import {
    View,
    Text,
    Image,
    StyleSheet,
    Dimensions,
    TouchableOpacity,
    ScrollView
} from 'react-native'

export default class commodities extends Component {
    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            loaded: false,
            isSelectAll: false
        };
    }

    componentDidMount() {
        let url = URLconstant.GET_COMMODITIES
        let datakey = []
        let {spec_id} = this.props.route.params
        datakey['spec_id'] = spec_id
        Util.get(url, datakey, (datas) => {
            if (datas.status == 0) {
                let data = datas.data
                for (let item of data) {
                    item.is_select = false
                }
                this.setState({
                    goodsList: data,
                    loaded: true
                })
            }
        }, (err) => {

        })
    }


    selectGoods(index, is_select) {
        let goodsList = this.state.goodsList
        goodsList[index].is_select = !is_select
        this.setState({
            goodsList: goodsList
        })
    }

    selectAll() {
        let isSelectAll = this.state.isSelectAll
        let goodsList = this.state.goodsList
        for (let item of goodsList) {
            item.is_select = !isSelectAll
        }
        this.setState({
            isSelectAll: !isSelectAll,
            goodsList: goodsList
        })
    }

    goodsItem(item, index) {
        return (
            <View style={styles.goods_item} key={index}>
                <TouchableOpacity onPress={() => this.selectGoods(index, item.is_select)}>
                    <View style={{
                        width: 25,
                        height: 25,
                        borderRadius: 12.5,
                        alignItems: 'center',
                        justifyContent: 'center',
                        borderWidth: 1,
                        borderColor: "#e0e0e0",
                        backgroundColor:"#fff"
                    }}>
                        {
                            item.is_select ?
                                <Image
                                    source={require('../imgs/true.png')}
                                    resizeMode={'cover'}
                                    style={{width:20,height:20}}
                                />
                                :
                                null
                        }
                    </View>
                </TouchableOpacity>
                <View style={styles.goods_info_right}>
                    <Image
                        source={{uri: item.default_image}}
                        resizeMode={'cover'}
                        style={{width: 80, height: 80}}
                    />
                    <View style={styles.goods_info}>
                        <View>
                            <Text style={{fontSize: 16, color: "#000"}}>{item.goods_name}</Text>
                            <Text style={{fontSize: 12, color: "#696969"}}>{item.spec_1},{item.spec_2}</Text>
                        </View>
                        <Text style={{fontSize: 12, color: "#f00"}}>{item.price}/米</Text>
                    </View>
                </View>
            </View>
        )
    }

    //加入购物车
    addToCart() {
        let goodsList = this.state.goodsList
        let goods_ids = []
        let spec_ids = []
        for (let item of goodsList) {
            if (item.is_select == true) {
                goods_ids.push(item.goods_id)
                spec_ids.push(item.spec_id)
            }
        }
        if (goods_ids.length == 0) {
            Toast.show('请先选择要加入购物车的商品')
            return false
        }
        let url = URLconstant.ADD_CART_TOTAL
        let datakey = []
        datakey['goods_id'] = goods_ids.toString();
        datakey['user_id'] = this.state.user_id;
        datakey['spec_id'] = spec_ids.toString();
        datakey['is_means'] = 1
        datakey['shop_id'] = 0
        Util.post(url, datakey, (datas) => {
            Toast.show(datas.msg)
            LOG('datas==' + JSON.stringify(datas))
        }, (err) => {

        })
    }

    render() {
        return (
            <View style={{flex: 1,backgroundColor:"#fff"}}>
                <Header navigation={this.props.navigation} title={'商品清单'}/>
                {
                    !this.state.loaded ?
                        <View style={{flex: 1}}>
                            {Util.loading()}
                        </View> :
                        <View style={{flex: 1}}>
                            <ScrollView style={{flex: 1}}>
                                {
                                    this.state.goodsList.map((item, index) => {
                                        return this.goodsItem(item, index)
                                    })
                                }
                            </ScrollView>
                            <View style={styles.bottom_view}>
                                <TouchableOpacity
                                    onPress={() => this.selectAll()}
                                    style={{flexDirection: 'row', alignItems: 'center'}}>
                                    <View style={{
                                        width: 25,
                                        height: 25,
                                        borderRadius: 12.5,
                                        alignItems: 'center',
                                        justifyContent: 'center',
                                        borderWidth: 1,
                                        borderColor: "#e0e0e0",
                                        backgroundColor:"#fff"
                                    }}>
                                        {
                                            this.state.isSelectAll ?
                                                <Image
                                                    source={require('../imgs/true.png')}
                                                    resizeMode={'cover'}
                                                    style={{width:20,height:20}}
                                                />
                                                :
                                                null
                                        }
                                    </View>
                                    <Text style={{fontSize: 12, color: "#333", marginLeft: 5}}>全选</Text>
                                </TouchableOpacity>
                                <TouchableOpacity style={styles.add_cart} onPress={() => this.addToCart()}>
                                    <Text style={{fontSize: 14, color: "#fff"}}>加入购物车</Text>
                                </TouchableOpacity>
                            </View>
                        </View>
                }
            </View>
        )
    }
}
var styles = StyleSheet.create({
    goods_item: {
        padding: 15,
        borderBottomWidth: 1,
        borderBottomColor: "#f0f0f0",
        flexDirection: "row",
        alignItems: "center",
        justifyContent: 'center'
    },
    goods_info_right: {
        flex: 1,
        paddingLeft: 15,
        flexDirection: 'row',
        alignItems: 'center'
    },
    goods_info: {
        flex: 1,
        height: 70,
        justifyContent: "space-between",
        paddingLeft: 10
    },
    bottom_view: {
        height: 45,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        paddingLeft: 15,
        backgroundColor: "#efefef"
    },
    add_cart: {
        width: 120,
        height: 45,
        backgroundColor: "#ed1f12",
        alignItems: 'center',
        justifyContent: 'center'
    }
})